<template>
	<el-container>
		<el-header>
			<div class="left-panel">
        <el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length == 0" @click="batch_Logout"></el-button>
			</div>
      <div class="right-panel">
          <div class="right-panel-search">
            <el-input v-model="search.userName" placeholder="登录账号" clearable></el-input>
            <el-button type="primary" icon="el-icon-search" @click="btnSearch"></el-button>
          </div>
        </div>
		</el-header>
		<el-main class="nopadding">
			<jd-table ref="table" :apiObj="apiObj" @selection-change="selectionChange" :params="params" row-key="tokenId" stripe>
				<el-table-column type="selection" width="50"></el-table-column>
        <el-table-column label="会话编号" min-width="350" prop="tokenId"/>
        <el-table-column label="登录名称" width="150" prop="userName"/>
        <el-table-column label="部门名称" width="150" prop="deptName"/>
        <el-table-column label="登录IP" width="150" prop="ipaddr"/>
        <el-table-column label="登录地点" width="150" align="center" prop="loginLocation"/>
        <el-table-column label="浏览器" width="150" align="center" prop="browser"/>
        <el-table-column label="操作系统" width="150" align="center" prop="os"/>
        <el-table-column label="登录时间" prop="loginTime" width="180">
          <template #default="scope">
            <span>{{ $TOOL.dateFormat(scope.row.loginTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="160">
          <template #default="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="forceLogout(scope.row)"
              v-hasPermi="['monitor:online:forceLogout']"
            >强退</el-button>
          </template>
        </el-table-column>
			</jd-table>
		</el-main>
	</el-container>
</template>

<script>
	export default {
		name: 'Online',
		data() {
			return {
        apiObj: this.$API.monitor.online.list,
        params: {},
        selection: [],
        search: {
          userName: undefined
        }
			}
		},
		methods: {
			selectionChange(selection) {
        this.selection = selection
      },
      btnSearch(){
        this.params = { ...this.search }
      },
      /** 强退按钮操作 */
      forceLogout(row) {
        this.$confirm(`是否确认强退名称为"` + row.userName + `"的用户？`, '提示', {
					type: 'warning',
				}).then(async () => {
          var res = await this.$API.monitor.online.forceLogout.delete(row.tokenId);
          if (res.code == 200){
            this.$refs.table.getData();
            this.$message.success("恭喜，强退操作成功");
          }
				}).catch(() => {})
      },
      batch_Logout() {
        let ids = this.selection.map((item) => item.tokenId);
        var message = '是否确认需要强退选中的用户？';
        
        this.$confirm(message, '提示', {
					type: 'warning',
				}).then(async () => {
          for (let item of ids) {
            await this.$API.monitor.online.forceLogout.delete(item);
          }
          this.$refs.table.getData();
          this.$message.success("恭喜，强退操作成功");
				}).catch(() => {})
      }
		}
	}
</script>

<style>
</style>